<template>
  <view :class="['xl-three-box', type == 'skew' && 'xl-three-box-skew']" :style="{'--height': $xl.calcUnit(height, 'rpx'), '--gap': $xl.calcUnit(gap, 'rpx'), '--radius': $xl.calcUnit(radius, 'rpx')}">
    <view class="xl-three-box-left" :style="{'--width': $xl.calcUnit(width, 'rpx'),'--left-width': $xl.calcUnit(leftWidth, 'rpx'), background: items[0]?.background ? items[0]?.background : '#ffffff'}" @click="clickItem(0)">
      <slot name="left" :item="items[0]">
        <view class="xl-three-box-info">
          <view class="xl-three-box-info-title">{{ items[0]?.title }}</view>
          <view class="xl-three-box-info-subtitle">{{ items[0]?.subtitle ?? items[0]?.title }}</view>
        </view>
        <xl-image class="img" :src="items[0]?.img" :style="items[0]?.imgStyle"></xl-image>
      </slot>
    </view>
    <view class="xl-three-box-right">
      <view class="xl-three-box-right-top" :style="{background: items[1]?.background || '#ffffff'}" @click="clickItem(1)">
        <slot name="rightTop" :item="items[1]">
          <view class="xl-three-box-info">
            <view class="xl-three-box-info-title">{{ items[1]?.title }}</view>
            <view class="xl-three-box-info-subtitle">{{ items[1]?.subtitle ?? items[1]?.title }}</view>
          </view>
          <xl-image class="img" :src="items[1]?.img" :style="items[1]?.imgStyle"></xl-image>
        </slot>
      </view>
      <view class="xl-three-box-right-bottom" :style="{background: items[2]?.background || '#ffffff'}" @click="clickItem(2)">
        <slot name="rightBottom" :item="items[2]">
          <view class="xl-three-box-info">
            <view class="xl-three-box-info-title">{{items[2]?.title}}</view>
            <view class="xl-three-box-info-subtitle">{{ items[2]?.subtitle ?? items[2]?.title }}</view>
          </view>
          <xl-image class="img" :src="items[2]?.img" :style="items[2]?.imgStyle"></xl-image>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
import propsData from './props.js'
const props = defineProps(propsData)
const emits = defineEmits(['click'])

const leftSkew = ref('100%')
const rightSkew = ref('0%')
const instance = getCurrentInstance();
onMounted(()=>{
  if(props.type == 'skew'){
    leftSkew.value =(1 - parseInt(props.gap) / parseInt(props.leftWidth)) * 100 + '%'
    uni.createSelectorQuery().in(instance).select('.xl-three-box-right').boundingClientRect((data) => {
      let rightWidth = uni.$xl.px2upx(Math.floor(data.width))
      rightSkew.value = parseInt(props.gap) / rightWidth * 100 + '%'
    }).exec();
  }
})

function clickItem(index){
  emits('click', props.items[index])
  // 如果配置了url参数，跳转页面
  if (props.items[index].url) {
    uni.$xl.router.push({ name: props.items[index].url, params: props.items[index].params})
  }
}
</script>

<style lang="scss" scoped>
.xl-three-box {
  width: var(--width);
  height: var(--height);
  margin: 10rpx auto 0;
  display: flex;

  &.xl-three-box-skew{
    .xl-three-box-left {
      clip-path: polygon(0 0, 100% 0, v-bind(leftSkew) 100%, 0 100%);
      border-radius: var(--radius) 0 0 var(--radius);
      margin-right: 0;
    }
    .xl-three-box-right{
      clip-path: polygon(v-bind(rightSkew) 0, 100% 0, 100% 100%, 0 100%);
      .xl-three-box-right-top {
        border-radius: 0 var(--radius) var(--radius) 0;
        .xl-three-box-info {
          padding-left: 40rpx;
        }
      }
      .xl-three-box-right-bottom {
        border-radius: 0 var(--radius) var(--radius) 0;
        .xl-three-box-info {
          padding-left: 30rpx;
        }
      }
    }
  }

  .xl-three-box-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: var(--left-width);
    height: var(--height);
    border-radius: var(--radius);
    margin-right: var(--gap);
    position: relative;

    .img {
      position: absolute;
      right: 0;
      bottom: 0;
      width: var(--left-width);
    }
  }

  .xl-three-box-right {
    flex: 1;
    .xl-three-box-right-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: calc((var(--height) - var(--gap))/2);
      border-radius: var(--radius);
      position: relative;
    }

    .xl-three-box-right-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: var(--gap);
      height: calc((var(--height) - var(--gap))/2);
      border-radius: var(--radius);
      position: relative;
    }

    .img {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      width: 100rpx;
    }
  }
  .xl-three-box-info {
    padding-top: 26rpx;
    padding-left: 30rpx;
    box-sizing: border-box;

    .xl-three-box-info-title{
      font-weight: bold;
    }

    .xl-three-box-info-subtitle {
      margin-top: 12rpx;
      font-size: 25rpx;
      color: #999;
    }
  }
}
</style>